import { Navigate } from 'react-router-dom'
import { lazy, ReactNode, Suspense } from 'react'
const Home = lazy(() => import('../views/home'))
const About = lazy(() => import('../views/about'))
const User = lazy(() => import('../views/User'))
const Page1 = lazy(() => import('../views/page1'))
const Page2 = lazy(() => import('../views/page2'))
const Sub1 = lazy(() => import('../views/sub1'))
const Sub2 = lazy(() => import('../views/sub2'))

// 实现懒加载的用Suspense包裹 定义函数
const lazyLoad = (children: ReactNode): ReactNode => {
  return <Suspense fallback={<h1>Loading...</h1>}>{children}</Suspense>
}

const indexRouter = [
  //使用Navigate进行重定向
  {
    path: '/',
    element: <Navigate to="/home" />,
  },
  {
    path: '/',
    element: lazyLoad(<Home />),
    children: [
      {
        path: '/home',
        //这里是你需要的路由组件
        element: lazyLoad(<About />),
      },
      {
        path: '/user',
        element: lazyLoad(<User />),
      },
      {
        path: '/page1',
        element: lazyLoad(<Page1 />),
      },
      {
        path: '/page2',
        element: lazyLoad(<Page2 />),
      },
      {
        path: '/sub1',
        element: lazyLoad(<Sub1 />),
      },
      {
        path: '/sub2',
        element: lazyLoad(<Sub2 />),
      },
    ],
  },
  {
    path: '*',
    element: <Navigate to="/home" />,
  },
]

export default indexRouter
